<template>
	<view class="pageBg">
		<Skeleton v-if="skeletonLoading" type="jobfairDetail"></Skeleton>
		<Head :title="info.title" type="detail" :isWhiteBg='isWhiteBg' :isBack="false"></Head>
		<view class="banner">
			<image src="@/jobfairs/static/img/banner.png"></image>
			<text :class="'card holddate' + info.holddate">{{info.holddate_text}}</text>
		</view>
		<view class="wrapper">
			<view class="statistics">
				<view class="num">
					<view class="t1">{{info.company_num}}</view>
					<view class="t2">参会企业</view>
				</view>
				<view class="num cgBg">
					<view class="t1">{{info.jobs_num}}</view>
					<view class="t2">可投职位</view>
				</view>
				<view class="num">
					<view class="t1">{{info.click}}</view>
					<view class="t2">浏览次数</view>
				</view>
			</view>
			<view class="tabWrapper">
				<view class="tabBtn">
					<view :class="currentTab == 'blurb' ? 'btn ac' : 'btn'" @click="handelTab('blurb')">简介</view>
					<view :class="currentTab == 'com' ? 'btn ac' : 'btn'" @click="handelTab('com')">企业</view>
					<view :class="currentTab == 'reserve' ? 'btn ac' : 'btn'" @click="handelTab('reserve')">预定</view>
					<view :class="currentTab == 'address' ? 'btn ac' : 'btn'" @click="handelTab('address')">地址</view>
				</view>
				<view class="tabCon">
					<view class="con" v-if="currentTab == 'blurb'">
						<view class="blurb">
							<view class="blurbTitle" v-if="info.title">招聘会名称</view>
							<view class="text" v-if="info.title">{{info.title}}</view>

							<view class="blurbTitle" v-if="info.sponsor">主办方</view>
							<view class="text" v-if="info.sponsor">{{info.sponsor}}</view>

							<view class="blurbTitle" v-if="info.predetermined_start && info.predetermined_end">报名时间
							</view>
							<view class="text" v-if="info.sponsor">{{info.predetermined_start | timeFilter}} 至
								{{info.predetermined_end | timeFilter}}
							</view>
							<view class="blurbTitle">举办时间</view>
							<view class="text">{{info.holddate_start | timeFilter}} 至 {{info.holddate_end | timeFilter}}
							</view>
							<view class="blurbTitle" v-if="info.introduction">招聘会简介</view>
							<view class="text" v-if="info.introduction">
								<u-parse :html="info.introduction"></u-parse>
							</view>

							<view class="blurbTitle" v-if="info.participants_object">参会对象</view>
							<view class="text" v-if="info.participants_object">{{info.participants_object}}</view>

							<view class="blurbTitle" v-if="info.price">摊位设置及费用</view>
							<view class="text" v-if="info.price">{{info.price}}</view>
							<view class="blurbTitle" v-if="info.registration_method">参会报名方法</view>
							<view class="text" v-if="info.registration_method">{{info.registration_method}}</view>
						</view>
					</view>

					<view class="con" v-if="currentTab == 'com'">
						<view class="companyItem" v-for="(item,index) in comList">
							<view class="companyInfo" :style="{paddingBottom:item.jobs_list.length>0?'26rpx':'0'}"
								@click="handleJumpCompany(item)">
								<view class="img">
									<image :src="item.logo" mode="aspectFill"></image>
								</view>
								<view class="infoText">
									<view class="companyName overflow">
										{{item.companyname}}
									</view>
									<view class="position overflow">
										已预定展位：<text class="color">{{item.position}}</text>
									</view>
								</view>
								<view class="icon">
									<u-icon name="arrow-right" color="#797979"></u-icon>
								</view>
							</view>
							<view class="jobList" :style="{height:item.height}">
								<view class="jobItem u-border-bottom" v-for="(jobItem,index) in item.jobs_list"
									:key="index" @click="handleJumpJob(jobItem)">
									<view class="jobInfo">
										<view class="jobName overflow">{{jobItem.jobname}}</view>
									</view>
									<view class="jobSalary overflow">{{jobItem.wage_text}}</view>
									<view class="jobTag">
										<view class="tag color1">
											{{jobItem.experience_text ? jobItem.experience_text : '经验不限'}}
										</view>
										<view class="tag color2">
											{{jobItem.education_text ?jobItem.education_text : '学历不限'}}
										</view>
										<view :class="['tag', index == 0 ? 'color3' : '' ,index == 1 ? 'color1' : '' ]"
											v-for="(tag,index) in jobItem.tag_text_arr.slice(0,2)" :key="index">{{tag}}
										</view>
									</view>
								</view>
							</view>
							<!-- 多于三个职位，有展开全部 少于等于3，不显示展开 -->
							<view class="more" v-if="item.jobs_list.length>3">
								<view class="moreText" @click.stop="handleMore(item)">
									{{item.isMore ? '展开全部':'收起'}}
									<u-icon class="icon" :name="item.isMore ? 'arrow-down' : 'arrow-up'"
										color="#266DFF"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view class="con" v-if="currentTab == 'reserve'">
						<view class="reserve">
							<u-field :clearable="false" :placeholder-style="fieldInputPlaceholderStyle"
								:field-style="fieldInputStyle" disabled input-align="right" label="展位预定"
								placeholder="查看展位图" right-icon="arrow-right" @click="handlePreviewImage">
							</u-field>
							<u-field v-if="info.is_reserve==1" :placeholder-style="fieldInputPlaceholderStyle"
								:field-style="fieldInputStyle" :clearable="false" v-model="info.position" disabled
								input-align="right" label="已预定展位号" placeholder="请选择" right-icon="arrow-right">
							</u-field>
							<view v-if="info.is_reserve==0 && info.predetermined==1">
								<u-field :placeholder-style="fieldInputPlaceholderStyle" :field-style="fieldInputStyle"
									:clearable="false" v-model="positionVal.area" disabled @click="handleIsArea"
									input-align="right" label="选择展区" placeholder="请选择" right-icon="arrow-right">
								</u-field>
								<u-field :placeholder-style="fieldInputPlaceholderStyle" :field-style="fieldInputStyle"
									v-if="positionVal.area!=''" :clearable="false" v-model="positionVal.position"
									:disabled="positionVal.positionShow"
									@click="isAreaShow = positionVal.positionShow ? true :false" input-align="right"
									label="选择展位" placeholder="请选择" right-icon="arrow-right">
								</u-field>
								<u-field :placeholder-style="fieldInputPlaceholderStyle" :field-style="fieldInputStyle"
									:clearable="false" v-model="reserve.contact" input-align="right" label="联系人"
									placeholder="请填写">
								</u-field>
								<u-field :placeholder-style="fieldInputPlaceholderStyle" :field-style="fieldInputStyle"
									:clearable="false" v-model="reserve.mobile" input-align="right" label="手机号"
									placeholder="请填写">
								</u-field>
							</view>
						</view>
					</view>
					<view class="con" v-if="currentTab == 'address'">
						<view class="address">
							<view class="blurbTitle" v-if="info.map_lat>0 || info.map_lng > 0">举办地址</view>
							<view class="text" v-if="info.map_lat>0 || info.map_lng > 0">
								<view>{{info.address}}</view>
								<view class="dtbg" @click="openLocation()">
									<img class="bg" src="@/jobfairs/static/img/dtbj.png" alt="">
									<view class="txt">{{info.address}}</view>
								</view>
								<!-- <map class="map" :latitude="info.map_lat" :longitude="info.map_lng" :markers="markers"
									:enable-zoom="false" :enable-scroll="false"></map> -->
							</view>
							<view class="blurbTitle" v-if="info.bus">乘车路线</view>
							<view class="text" v-if="info.bus">{{info.bus}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="footerBtns footerBtnBoxShow">
			<view class="btn color1" @click="handleJumpReserve">我的报名</view>
			<view class="btn color2" v-if="currentTab != 'reserve'" @click="handelTab('reserve')">企业预定</view>
			<view class="btn color2" v-if="info.is_reserve==0 && info.predetermined==1 && currentTab == 'reserve'"
				@click="handleEnroll">立即预定</view>

			<view class="btn color3" v-if="info.is_reserve==1 && info.reserve_status==2 && currentTab == 'reserve'">等待审核
			</view>
			<view class="btn color3" v-if="info.is_reserve==1 && info.reserve_status==1 && currentTab == 'reserve'">预定成功
			</view>
			<view class="btn color3" v-if="info.is_reserve==1 && info.reserve_status==3 && currentTab == 'reserve'">预定失败
			</view>
			<view class="btn color3" v-if="info.is_reserve==0 && info.predetermined==2 && currentTab == 'reserve'">停止预定
			</view>
			<view class="btn color3" v-if="info.is_reserve==0 && info.predetermined == 0 && currentTab == 'reserve'">
				未开始预定</view>
		</view>
		<u-picker v-model="isArea" mode="selector" :range="areaList" range-key="area" @confirm="handleArea"></u-picker>
		<u-picker v-model="isAreaShow" mode="selector" :range="positions" range-key="position"
			@confirm="handleAreaShow"></u-picker>
		<Popup ref="noLoginPopup" title="系统提示" :showCancelButton="true" :isBorder="false">
			<view class="noLoginContent">预定展位需要登录企业账号</view>
			<view class="noLoginCancel" slot="cancel-button" @click="$refs.noLoginPopup.close()">取消</view>
			<view class="noLoginConfirm" slot="confirm-button" @click="handleNoLogin">去登录</view>
		</Popup>
		<!-- 登录弹窗 -->
		<LoginPopup ref="LoginPopup" :single_login="true" :utype="1" :after_login_data="after_login_data"
			:redirect="'/jobfairs/JobfairShow?id=' + id" @phoneNumberLogin="phoneNumberLogin"></LoginPopup>
		<!-- 登录弹窗 -->
		<TopTips ref="TopTips"></TopTips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import {
		DbToGc
	} from '@/utils/map.js'
	import api from '@/api'
	import {
		parseTime
	} from '@/utils/index.js'
	import LoginPopup from '@/components/LoginPopup.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	import Skeleton from '@/components/Skeleton.vue'
	import TopTips from '@/components/TopTips.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				skeletonLoading: true,
				isAreaShow: false,
				isArea: false,
				currentTab: 'blurb',
				id: 0,
				info: {},
				areaList: [],
				page: 1,
				pagesize: 10,
				comList: [],
				markers: [],
				reserve: {
					jobfair_id: 0,
					position_id: 0,
					contact: '',
					mobile: ''
				},
				positionVal: {
					area: '',
					position: '',
					positionShow: true
				},
				positions: [],
				is_company_login: false,
				after_login_data: {},
				isWhiteBg: false
			};
		},
		components: {
			LoginPopup,
			Skeleton,
			TopTips
		},
		computed: {
			...mapState(['fieldInputStyle', 'fieldInputPlaceholderStyle'])
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
			}
		},
		onPageScroll(obj) {
			if (obj.scrollTop > 100) {
				this.isWhiteBg = true
			}
			if (obj.scrollTop < 10) {
				this.isWhiteBg = false
			}
		},
		onShareAppMessage() {
			let info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareAppMessage({
				url: '/jobfairs/JobfairShow?id=' + this.id,
				alias: "jobfairshow",
				info: info
			})
		},
		onShareTimeline() {
			let info = {
				...this.info
			}
			info.imgUrl = this.info.thumb
			return onShareTimeline({
				url: '/jobfairs/JobfairShow?id=' + this.id,
				alias: "jobfairshow",
				info: info
			})
		},
		onLoad(options) {
			console.log(options, 'options')
			this.is_company_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 1
			this.id = options.id ? options.id : 0
			this.reserve.jobfair_id = this.id
			this.getJobfairShow()
			this.getCompanylist(!0)
			this.getPosition()
			if (options.method) {
				setTimeout(() => {
					this[options.method]('reserve')
				}, 1000)
			}
		},
		methods: {
			openLocation() {
				console.log(this.info, '===')
				let info = this.info
				uni.openLocation({
					latitude: info.map_lat,
					longitude: info.map_lng,
					success: function() {
						console.log('success');
					}
				});
			},
			phoneNumberLogin(item) {
				this.is_company_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 1
				setTimeout(() => {
					this[this.after_login_data.method]()
				}, 1000)
			},
			handleJumpCompany(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/commonViews/CompanyShow?id=' + item.id
				})
			},
			handleJumpJob(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/commonViews/JobShow?id=' + item.id
				})
			},
			handleJumpReserve() {
				if (!this.is_company_login) {
					// 如果登录的是个人账号则需要提示用户切换账号
					if (this.$store.state.LoginType == 2 && !this.is_company_login) {
						this.$refs.TopTips.show({
							title: '请登录企业账号',
							type: 'error'
						})
						return false
					}
					this.$refs.LoginPopup.open()
					this.after_login_data = {
						method: 'handleJumpReserve'
					}
				} else {
					uni.navigateTo({
						url: '/jobfairs/JobfairReserve'
					})
				}
			},
			handleMore(item) {
				if (item.isMore) {
					this.$set(item, 'height', 'auto')
				} else {
					this.$set(item, 'height', (2 * 210) + 'rpx')
				}
				this.$set(item, 'isMore', !item.isMore)
			},
			handelTab(type) {
				if (this.is_company_login !== true && type == 'reserve') {
					this.$refs.noLoginPopup.open()
				} else {
					this.currentTab = type
				}
			},
			handleIsArea() {
				this.isArea = true
			},
			// 获取招聘会信息
			getJobfairShow() {
				http.get(api.jobfair_show, {
					id: this.id
				}).then(res => {

					if (res.data.code == 200) {

						this.info = res.data.data.info
						let po = DbToGc(this.info.map_lat, this.info.map_lng)
						this.info.map_lat = po.lat
						this.info.map_lng = po.lng
						this.markers.push({
							latitude: this.info.map_lat,
							longitude: this.info.map_lng
						})
						// #ifdef MP-TOUTIAO || MP-ALIPAY
						uni.setNavigationBarTitle({
							title: this.info.title
						})
						// #endif
						this.skeletonLoading = false
					}
				})
			},
			getCompanylist() {
				http.get(api.jobfair_comlist, {
					id: this.id,
					page: this.page,
					pagesize: this.pagesize
				}).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.items
						list.forEach((item) => {
							let isMore = item.jobs_list.length > 2 ? true : false
							let height = item.jobs_list.length > 2 ? (2 * 210) + 'rpx' : 'auto'
							this.$set(item, 'isMore', isMore)
							this.$set(item, 'height', height)
						})
						this.comList = list
						this.skeletonLoading = false
					}
				})
			},
			// 获取展位图
			getPosition() {
				http.get(api.jobfair_position, {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.areaList = res.data.data.items
					}
				}).catch(() => {})
			},
			handleArea(val) {
				let currentVal = this.areaList[val[0]]
				if (this.positionVal.area != currentVal.area) {
					var temp = []
					for (var i in currentVal.positions) {
						if (currentVal.positions[i]['status'] == 0) {
							temp.push({
								id: currentVal.positions[i]['id'],
								position: currentVal.positions[i]['position']
							})
						}
					}
					if (temp.length <= 0) {
						this.positionVal.positionShow = !1
						this.positionVal.position = '暂无可选展位'
					} else {
						this.positionVal.positionShow = !0
						this.positionVal.position = ''
					}
					this.positionVal.area = currentVal.area
					this.reserve.position_id = 0
					this.positions = [...temp]
				}
			},
			handleAreaShow(val) {
				let currentVal = this.positions[val[0]]
				this.positionVal.position = currentVal.position
				this.reserve.position_id = currentVal.id
			},
			// 报名
			handleEnroll() {
				http.post(api.jobfair_reserve, this.reserve).then(res => {
					if (res.data.code == 200) {
						this.getJobfairShow()
					}

				}).catch(() => {})
			},
			// 展位预览
			handlePreviewImage() {
				uni.previewImage({
					urls: this.info.position_img
				})
			},
			// 去登录 
			handleNoLogin() {
				uni.redirectTo({
					url: `/member/Login?utype_alias=company&after_login_data=handelTab&redirect=/jobfairs/JobfairShow&id=${this.id}&single_login=${true}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		height: 300rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}

		.card {
			position: absolute;
			left: 0;
			top: 0;
			color: #fff;
			font-size: 22rpx;
			border-radius: 0px 0px 25rpx 0px;
			padding: 8rpx 27rpx 8rpx 21rpx;

			&.color1 {
				background: linear-gradient(45deg, #16C272, #5AD099);
			}

			&.color2 {
				background: linear-gradient(45deg, #FC6502, #FF9149);
			}

			&.green,
			&.holddate1 {
				background: linear-gradient(45deg, #16C272, #5DD19B);
			}

			&.orange,
			&.holddate0 {
				background: linear-gradient(45deg, #FC6502, #FF9149);
			}

			&.grey,
			&.holddate2 {
				background: linear-gradient(45deg, #ABABAB, #C4C4C4);
			}

		}
	}

	.wrapper {
		margin: 0 30rpx 0;
		padding: 0 0 140rpx;
	}

	.statistics {
		display: flex;
		align-items: center;
		margin: -80rpx 0 16rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		text-align: center;
		position: relative;
		z-index: 10;

		.num {
			flex: 1;

			.t1 {
				color: #1360FF;
				font-size: 48rpx;
				font-weight: bold;
			}

			.t2 {
				color: #2A2A2A;
				font-size: 26rpx;
				margin-top: 10rpx;
			}

			&.cgBg {
				background: url('@/jobfairs/static/img/statistics-left.png') no-repeat left center,
					url('@/jobfairs/static/img/statistics-right.png') no-repeat right center;
			}
		}
	}

	.tabWrapper {
		.tabBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 14rpx;
			background: #fff;
			margin-bottom: 18rpx;

			.btn {
				flex: 1;
				color: #2A2A2A;
				font-size: 30rpx;
				position: relative;
				height: 82rpx;
				line-height: 82rpx;
				font-weight: 500;
				text-align: center;

				&.ac {
					color: #1360FF;
					font-size: 36rpx;
					font-weight: 500;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 32rpx;
						height: 6rpx;
						background: #1360FF;
						border-radius: 4rpx 4rpx 0rpx 0rpx;
					}
				}
			}
		}

		.tabCon {
			.con {

				.companyItem {
					background: #fff;
					margin-bottom: 22rpx;
					padding: 26rpx 0;
					border-radius: 14rpx;

					.companyInfo {
						padding: 0 24rpx 26rpx 26rpx;
						display: flex;

						.img {
							flex-shrink: 0;
							width: 90rpx;
							height: 90rpx;
							border-radius: 8rpx;
							border: 1rpx solid #F7F7F7;
							overflow: hidden;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;

							image {
								display: block;
							}
						}

						.infoText {
							flex-shrink: 0;
							width: calc(100% - 112rpx - 28rpx - 20rpx);
							margin-right: 20rpx;
							// display: flex;
							// flex-direction: column;
							// justify-content: space-between;

							.companyName {
								color: #2A2A2A;
								font-size: 36rpx;
								font-weight: bold;
								margin-bottom: 8rpx;
								margin-top: -2rpx;
							}

							.position {
								font-size: 26rpx;
								color: #999999;

								.color {
									color: #1360FF;
								}
							}

						}

						.icon {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.jobList {
						overflow: hidden;

						.jobItem {
							padding: 25rpx 19rpx 28rpx 29rpx;

							&::after {
								border-color: #F2F2F2;
							}

							&:last-child {
								padding: 25rpx 19rpx 0 29rpx;
							}

							&:last-child::after {
								border: none;
							}
						}
					}

					.more {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #266DFF;
						font-size: 24rpx;
						margin-top: 26rpx;
						font-weight: 500;

						.moreText {
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								margin-left: 10rpx;
							}
						}
					}
				}

				.address {
					background: #FFFFFF;
					border-radius: 14rpx;
					padding: 28rpx 0;

					.text {
						.dtbg {
							width: 100%;
							height: 200rpx;
							position: relative;

							.bg {
								display: block;
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
							}

							.txt {
								width: 100%;
								height: 100%;
								background: url('@/jobfairs/static/img/tac.png') center center no-repeat;
								background-size: 461rpx 151rpx;
								position: absolute;
								top: 0;
								left: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								z-index: 9;
								box-sizing: border-box;
								padding-bottom: 15rpx;
								padding-left: 188rpx;
							}
						}
					}
				}


				.blurb {
					background: #FFFFFF;
					border-radius: 14rpx;
					padding: 28rpx 0 57rpx;
					margin-bottom: 15rpx;

				}


				.reserve {
					background: #fff;
					border-radius: 14rpx;
					overflow: hidden;

					::v-deep .u-field {
						padding: 28rpx;
					}
				}

				// 通用
				.blurbTitle {
					color: #2A2A2A;
					font-size: 32rpx;
					position: relative;
					// padding-left: 34rpx;
					font-weight: bold;
					padding: 10rpx 0 10rpx 34rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 4rpx;
						height: 28rpx;
						background: #266DFF;
						border-radius: 0px 4rpx 4rpx 0px;
					}
				}

				.text {
					color: #595959;
					font-size: 28rpx;
					padding: 0 34rpx;
					margin: 0 0 40rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.map {
						width: 100%;
						margin: 30rpx 0 39rpx 0;
						border-radius: 4rpx;
					}
				}

				.tag {
					display: flex;
					white-space: nowrap;

					.item {
						flex-shrink: 0;
						position: relative;
						color: #999999;
						font-size: 24rpx;
						margin-right: 30rpx;

						&::before {
							content: '';
							position: absolute;
							right: -18rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 6rpx;
							height: 6rpx;
							border-radius: 50%;
							background: #999999;
						}

						&:last-child {
							margin-right: 0;
						}

						&:last-child::before {
							display: none;
						}
					}
				}

				.jobInfo {
					font-size: 32rpx;
					margin-bottom: 14rpx;

					.jobName {
						flex-shrink: 0;
						color: #2A2A2A;
						font-size: 36rpx;
					}


				}

				.jobSalary {
					color: #FC6502;
					font-size: 36rpx;
					margin: 4rpx 0 14rpx;
				}

				.jobTag {

					display: flex;

					.tag {
						// color: #797979;
						// font-size: 24rpx;
						// background: #F1F5FF;
						// border-radius: 4rpx;
						// padding: 10rpx 21rpx;
						// margin-right: 12rpx;
						font-size: 28rpx;
						margin-right: 10rpx;
						border-radius: 6rpx;
						text-align: center;
						padding: 4rpx 18rpx;
						display: inline-block;
						color: #2263E9;
						font-size: 24rpx;
						background: #F3F6FD;

						&.color1 {
							color: #FF9D54;
							background: rgba(255, 157, 84, 0.08);
						}

						&.color2 {
							color: #AE79FF;
							background: rgba(174, 121, 255, 0.08);
						}

						&.color3 {
							color: #74CEA9;
							background: rgba(116, 206, 169, 0.08);
						}
					}
				}

				// .btns {
				// 	display: flex;
				// 	padding: 30rpx 26rpx 0;

				// 	.btn {
				// 		height: 70rpx;
				// 		line-height: 70rpx;
				// 		padding: 0rpx 96rpx;
				// 		border-radius: 14rpx;
				// 		margin-right: 40rpx;
				// 		border: 2rpx solid transparent;

				// 		&+.btn {
				// 			margin-right: 0;
				// 		}

				// 		&.blue {
				// 			color: #266DFF;
				// 			background: #F3F7FF;
				// 			border: 2rpx solid #1763FF;
				// 		}

				// 		&.orange {
				// 			color: #FC6502;
				// 			background: #FFF9F5;
				// 			border: 2rpx solid #FC6502;
				// 		}
				// 	}
				// }
			}
		}
	}


	.footerBtns {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 38rpx 0px rgba(88, 88, 88, 0.06);
		padding: 30rpx 57rpx;
		z-index: 100;

		.btn {
			margin-right: 32rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			padding: 24rpx 87rpx;
			display: inline-block;
			border-radius: 50rpx;

			&+.btn {
				margin-right: 0;
			}

			&.color1 {
				background: linear-gradient(45deg, #16C272, #5DD19B);
			}

			&.color2 {
				background: linear-gradient(45deg, #1360FF, #4381FF);
			}

			&.color3 {
				background: #B4CCFF;
			}
		}
	}

	::v-deep .popupFooter {
		justify-content: center;
		padding: 0 0 37rpx 0;

		.noLoginCancel {
			width: 220rpx;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			margin-right: 17rpx;
			color: #2A2A2A;
			font-size: 32rpx;
		}

		.noLoginConfirm {
			width: 300rpx;
			height: 80rpx;
			background: linear-gradient(45deg, #1360FF, #4381FF);
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.noLoginContent {
		color: #595959;
		font-size: 28rpx;
		padding: 70rpx 0 90rpx;
	}
</style>